<template>
  <base-container>
    <bw-textarea v-model:text="text" :show-guide="false" :submitting="submitting" :type="ProductEnum.BW"
      @submit="handleBwSearcher" @reset="handleBwReset" />
    <div v-show="getResult && BW || BWYXB">
      <table-toolbar title="推广词查询结果" />
      <a-table :pagination="false" :columns="columns" :data-source="pz360Data" />
    </div>
  </base-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import BaseContainer from '@/components/base-container/index.vue'
import { useCategory } from '@/hooks/useCategotry'
import { ProductEnum } from '@/core/enums/platform'
import getPz360PriceAskWords from '@/services/pz-360/getPz360PriceAskWords'
import BwTextarea from '@/views/price-sheet/components/BwTextarea.vue'
import { emojiMatcher } from '@/utils'
import TableToolbar from '@/components/table-toolbar/index.vue'
import { uniq } from 'lodash-es'

const [pz360Data, fetchPz360PriceAskWords] = getPz360PriceAskWords()
const submitting = ref(false)
const text = ref('')
const getResult = ref(false)
const type = ref<ProductEnum>(ProductEnum.BW)
const { BW, BWYXB } = useCategory(type)
const columns = [
  {
    title: '推广词',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '类型',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  }
]

async function handleBwSearcher() {
  getResult.value = false
  submitting.value = true

  if (emojiMatcher(text.value)) {
    return message.error('推广关键词中存在如：表情等非法字符')
  }

  const participle = text.value
    .toLowerCase()
    .split(/[\n\r\s,，;；]+/g)
    .filter((t) => t !== '')

  await fetchPz360PriceAskWords({
    keywords: uniq(participle)
  })

  submitting.value = false
  getResult.value = true
}

function handleBwReset() {
  getResult.value = false
  text.value = ''
}
</script>

<script lang="ts">
export default {
  name: 'PricePackage'
}
</script>

<style scoped lang="scss">
.toolbar {
  width: 700px;

  &-keyword {
    max-width: 326px;
    min-width: 250px;
  }

  &-local {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.search-icon {
  color: #a6a6a6;
}
</style>
